<template>
  <div class="login-c">
    <img src="../../assets/Loginbg.3377d0c.jpg">
    <div class="login-content">
      <div class="login-header">
        <img src="../../assets/Logotitle.1ba5466.png"/>
        <p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>
      </div>
      <div class="login-body">
        <div class="login-body-header">
          <span v-for="(item,index) in loginMode" :class="{loginactive:index == loginactivedefault }"  @click="loginModeHandler(index)">{{item.mode}}</span>
        </div>
        <component v-bind:is="currentTabComponent"></component>
      </div>
    </div>
  </div>
</template>

<script>
  import LoginPwd from './LoginComponents/LoginPwd'
  import LoginMessage from './LoginComponents/LoginMessage'
  export default {
    name: "LoginCourse",
    data(){
      return{
        loginMode:[
          {id:1,mode:'密码登录',component:'LoginPwd'},
          {id:2,mode:'短信登录',component:'LoginMessage'},
        ],

        loginactivedefault:0,
        currentTabComponent:LoginPwd,
      }
    },
    methods:{
      loginModeHandler(index){
        this.loginactivedefault = index;
        this.currentTabComponent = this.loginMode[index].component
      },
    },
    components:{
      LoginPwd,
      LoginMessage,
    }
  }
</script>

<style scoped>
  .login-c{
    position: relative;
    margin-top: -80px;
    height:100% ;
    display: flex;
    align-items: center;
  }
  .login-content{

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -238px;
    margin-top: -300px;
  }
  .login-header{
    text-align: center;
    font-size: 18px;
  }
  .login-header>img{
    width: 190px;
    height: auto;
  }
  .login-header>p{
    padding-top: 10px;
    padding-bottom: 50px;
    color: #fff;
  }
  .login-body{
    width: 400px;
    height: auto;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
    border-radius: 4px;
    margin: 0 auto;
    padding-bottom: 40px;
  }
  .login-body-header{
    font-size: 20px;
    color: #9b9b9b;
    letter-spacing: .32px;
    border-bottom: 1px solid #e6e6e6;
    padding-top: 50px;
    margin-left: 22px;
    margin-right: 22px;
    margin-bottom: 20px;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-around;
    padding-left: 60px;
    padding-right: 60px;
  }
  .login-body-header>span{
    padding-bottom: 10px;
    cursor: pointer;
  }

  .loginactive{
    border-bottom: 2px solid #ffc210;
    color:black;
  }
</style>
